<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>叠加图片</title>
    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/4.6.5/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/4.6.5/ol.js"></script>
    <script type="text/javascript" src="../../js/OpenLayersUtil.js"></script>
    <style>
        .map {
            height: 900px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        // 初始化地图，默认使用OSM地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    title: "天地图路网",
                    source: new ol.source.XYZ({
                        url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63"
                    })
                }),
            ],
            view: new ol.View({
                projection: ol.proj.get('EPSG:4326').getCode(),
                center: [120, 26],
                zoom: 8
            })
        });
        //地图上叠加新的图层
        /*var extent = [117.24194917241628, 23.91831310592743, 121.83916194758372, 28.064464674072568]
        var url = 'images/20201207000001_PHI.png';*/
        var extent = [60.0, 0.0, 160.0, 55.0]
        var url = 'http://localhost:3141/hlj/files/meteorData/out/pctureProducts/fy2/VIS/SATE_L2_F2G_VISSR_MWB_OTG_SEC-VIS-20220506-0900.AWX.png';
        // 制作图层源
        var source = new ol.source.ImageStatic({
            url: url,
            imageExtent: extent,
            // 图片跨域支持
            crossOrigin: ''
        });
        // 图片加载侦听
        source.on('imageloadend', function() {
            console.log('图片加载结束！')
        });
        source.on('imageloaderror', function() {
            console.log('图片加载失败！')
        });

        // 图层
        let image = null;
        if (image) {
            //如果存在图层，则替换图片资源
            image.setSource(source);
        } else {
            //如果不存在，则新建一个Image对象，并且添加图片资源
            image = new ol.layer.Image({
                source: source,
                opacity: 0.5,
            });
            map.addLayer(image);
        }
    </script>
</body>
</html>